<template>
  <div class="dashboard-container">
    <div class="page-header">
      <h2>工作台</h2>
      <p>欢迎回来，{{ doctorInfo.name }}。这是您今天的概览。</p>
    </div>
    
    <!-- 统计卡片 -->
    <div class="stat-cards">
      <a-card class="stat-card pending" @click="handleStatCardClick('pending')">
        <div class="stat-icon">
          <clock-circle-outlined />
        </div>
        <div class="stat-info">
          <div class="stat-title">待处理病例</div>
          <div class="stat-value">{{ stats.pending }}</div>
        </div>
      </a-card>
      
      <a-card class="stat-card in-progress" @click="handleStatCardClick('inProgress')">
        <div class="stat-icon">
          <file-outlined />
        </div>
        <div class="stat-info">
          <div class="stat-title">治疗中病例</div>
          <div class="stat-value">{{ stats.inProgress }}</div>
        </div>
      </a-card>
      
      <a-card class="stat-card completed" @click="handleStatCardClick('finished')">
        <div class="stat-icon">
          <check-circle-outlined />
        </div>
        <div class="stat-info">
          <div class="stat-title">已完成病例</div>
          <div class="stat-value">{{ stats.finished }}</div>
        </div>
      </a-card>
      
      <a-card class="stat-card reports" @click="handleStatCardClick('reports')">
        <div class="stat-icon">
          <profile-outlined />
        </div>
        <div class="stat-info">
          <div class="stat-title">待确认报告</div>
          <div class="stat-value">{{ stats.reports }}</div>
        </div>
      </a-card>
    </div>

    <div class="dashboard-content">
      <!-- 左侧医生信息 -->
      <div class="left-panel">
        <a-card class="doctor-card" :bordered="false">
          <div class="avatar-section">
            <a-avatar :size="80" class="doctor-avatar">
              <template #icon><UserOutlined /></template>
            </a-avatar>
            <div class="info">
              <h3>{{ doctorInfo.name }}</h3>
              <a-tag color="blue">{{ doctorInfo.status }}</a-tag>
            </div>
          </div>
          <a-divider />
          <div class="doctor-stats">
            <div class="doctor-stat-item" @click="handleDoctorStatClick('patients')">
              <team-outlined />
              <span>今日患者：8</span>
            </div>
            <div class="doctor-stat-item" @click="handleDoctorStatClick('completion')">
              <bar-chart-outlined />
              <span>完成率：85%</span>
            </div>
          </div>
          <a-button type="primary" block class="schedule-btn" @click="handleScheduleClick">
            <calendar-outlined />
            查看日程
          </a-button>
        </a-card>
        
        <a-card title="最近活动" class="activity-card" :bordered="false">
          <a-timeline>
            <a-timeline-item v-for="(activity, index) in recentActivity" :key="index" :color="getActivityColor(activity.type)" @click="handleActivityClick(activity)">
              <div class="activity-item">
                <div class="activity-title">{{ activity.title }}</div>
                <div class="activity-time">{{ activity.time }}</div>
              </div>
            </a-timeline-item>
          </a-timeline>
        </a-card>
      </div>

      <!-- 中间统计信息 -->
      <div class="middle-panel">
        <a-card class="cases-card" :bordered="false">
          <template #title>
            <div class="card-title">
              <span>待处理病例</span>
              <a-tag color="blue">{{ stats.pending }} 个</a-tag>
            </div>
          </template>
          <template #extra>
            <router-link to="/new-case">
              <a-button type="primary">
                <template #icon><PlusOutlined /></template>
                新建病例
              </a-button>
            </router-link>
          </template>
          
          <div class="cases-list">
            <div class="case-item" v-for="i in 5" :key="i" @click="handleCaseClick(i)">
              <div class="case-icon">
                <file-outlined />
              </div>
              <div class="case-info">
                <div class="case-title">患者 #{{ i }} - 牙齿检查</div>
                <div class="case-meta">
                  <span class="case-date">2025-03-{{ 10 + i }}</span>
                  <a-tag color="orange" v-if="i === 1">紧急</a-tag>
                </div>
              </div>
              <div class="case-action">
                <a-button type="primary" size="small" @click.stop="handleProcessCase(i)">处理</a-button>
              </div>
            </div>
          </div>
          
          <div class="view-more">
            <a @click="handleViewAllCases">查看全部 {{ stats.pending }} 个病例</a>
          </div>
        </a-card>
      </div>

      <!-- 右侧报告信息 -->
      <div class="right-panel">
        <a-card class="report-card" :bordered="false">
          <template #title>
            <div class="card-title">
              <span>待确认报告</span>
              <a-tag color="red">{{ stats.reports }} 个</a-tag>
            </div>
          </template>
          
          <div class="report-content">
            <div class="empty-placeholder" v-if="stats.reports === 0">
              <div class="empty-icon">
                <profile-outlined />
              </div>
              <div class="empty-text">暂无待确认报告</div>
            </div>
            <div class="report-list" v-else>
              <div class="report-item" v-for="i in stats.reports" :key="i" @click="handleReportClick(i)">
                <div class="report-item-icon">
                  <profile-outlined />
                </div>
                <div class="report-item-info">
                  <div class="report-item-title">张明 - 牙齿诊断报告</div>
                  <div class="report-item-date">2025-03-14</div>
                </div>
                <div class="report-item-action">
                  <a-button type="primary" size="small" @click.stop="handleViewReport(i)">查看</a-button>
                </div>
              </div>
            </div>
          </div>
        </a-card>
        
        <a-card class="completed-card" :bordered="false">
          <template #title>
            <div class="card-title">
              <span>已完成病例</span>
              <a-tag color="green">{{ stats.finished }} 个</a-tag>
            </div>
          </template>
          
          <div class="completed-list">
            <div class="completed-item" v-for="i in 3" :key="i" @click="handleCompletedCaseClick(i)">
              <div class="completed-icon">
                <check-circle-outlined />
              </div>
              <div class="completed-info">
                <div class="completed-title">李华 - 牙齿治疗</div>
                <div class="completed-date">2025-03-{{ 10 - i }}</div>
              </div>
            </div>
            
            <div class="view-more">
              <a @click="handleViewAllCompletedCases">查看全部 {{ stats.finished }} 个已完成病例</a>
            </div>
          </div>
        </a-card>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { 
  UserOutlined, 
  TeamOutlined, 
  BarChartOutlined, 
  CalendarOutlined, 
  FileOutlined, 
  ProfileOutlined, 
  CheckCircleOutlined, 
  PlusOutlined, 
  ClockCircleOutlined
} from '@ant-design/icons-vue'
import { useRouter } from 'vue-router'
import { message, notification } from 'ant-design-vue'

const router = useRouter()

// 医生信息
const doctorInfo = ref({
  name: '王医生',
  status: '在线',
  avatar: ''
})

// 统计数据
const stats = ref({
  pending: 12,
  inProgress: 8,
  finished: 24,
  reports: 3
})

// 最近活动
const recentActivity = ref([
  { title: '完成了李华的牙齿治疗', time: '今天 14:30', type: 'success' },
  { title: '新增了张明的病例', time: '今天 11:20', type: 'info' },
  { title: '确认了周一的预约', time: '昨天 16:45', type: 'warning' },
  { title: '上传了刘芳的牙齿扫描', time: '昨天 10:30', type: 'info' },
  { title: '完成了月度报告', time: '2025-03-12', type: 'success' }
])

// 获取活动颜色
const getActivityColor = (type) => {
  switch (type) {
    case 'success':
      return 'green'
    case 'warning':
      return 'orange'
    case 'error':
      return 'red'
    default:
      return 'blue'
  }
}

// 处理统计卡片点击
const handleStatCardClick = (type) => {
  const routes = {
    pending: '/cases/pending',
    inProgress: '/cases/in-progress',
    finished: '/cases/completed',
    reports: '/reports'
  }
  
  const titles = {
    pending: '待处理病例',
    inProgress: '治疗中病例',
    finished: '已完成病例',
    reports: '待确认报告'
  }
  
  message.success(`正在跳转到${titles[type]}页面`)
  router.push(routes[type])
}

// 处理医生统计点击
const handleDoctorStatClick = (type) => {
  if (type === 'patients') {
    message.info('今日有8位患者预约')
  } else if (type === 'completion') {
    notification.success({
      message: '完成率统计',
      description: '您本月的病例完成率为85%，比上月提高了5%，继续保持！',
      duration: 3
    })
  }
}

// 处理日程按钮点击
const handleScheduleClick = () => {
  router.push('/schedule')
}

// 处理活动点击
const handleActivityClick = (activity) => {
  notification.info({
    message: '活动详情',
    description: `${activity.title} - ${activity.time}`,
    duration: 3
  })
}

// 处理病例点击
const handleCaseClick = (id) => {
  router.push(`/case/${id}`)
}

// 处理处理病例按钮点击
const handleProcessCase = (id) => {
  message.success(`开始处理患者 #${id} 的病例`)
  router.push(`/case/${id}/process`)
}

// 查看全部病例
const handleViewAllCases = () => {
  router.push('/cases/pending')
}

// 处理报告点击
const handleReportClick = (id) => {
  router.push(`/report/${id}`)
}

// 处理查看报告按钮点击
const handleViewReport = (id) => {
  message.success(`正在查看报告 #${id}`)
  router.push(`/report/${id}/view`)
}

// 处理已完成病例点击
const handleCompletedCaseClick = (id) => {
  router.push(`/case/completed/${id}`)
}

// 查看全部已完成病例
const handleViewAllCompletedCases = () => {
  router.push('/cases/completed')
}

// 将用户信息保存到localStorage，以便MainLayout可以使用
if (doctorInfo.value && doctorInfo.value.name) {
  localStorage.setItem('username', doctorInfo.value.name)
}
</script>

<style scoped>
.dashboard-container {
  max-width: 100%;
  margin: 0 auto;
  padding: 20px;
}

.page-header {
  margin-bottom: 24px;
}

.page-header h2 {
  margin: 0;
  font-size: 24px;
  font-weight: 600;
  color: #262626;
}

.page-header p {
  margin: 8px 0 0 0;
  font-size: 14px;
  color: #8c8c8c;
}

.stat-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}

.stat-card {
  display: flex;
  align-items: center;
  padding: 16px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  cursor: pointer;
  transition: all 0.3s;
}

.stat-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.stat-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 48px;
  height: 48px;
  border-radius: 8px;
  margin-right: 16px;
  font-size: 24px;
}

.pending .stat-icon {
  background-color: rgba(24, 144, 255, 0.1);
  color: #1890ff;
}

.in-progress .stat-icon {
  background-color: rgba(250, 173, 20, 0.1);
  color: #faad14;
}

.completed .stat-icon {
  background-color: rgba(82, 196, 26, 0.1);
  color: #52c41a;
}

.reports .stat-icon {
  background-color: rgba(245, 34, 45, 0.1);
  color: #f5222d;
}

.stat-info {
  flex: 1;
}

.stat-title {
  font-size: 14px;
  color: #8c8c8c;
  margin-bottom: 4px;
}

.stat-value {
  font-size: 24px;
  font-weight: 600;
  color: #262626;
}

.dashboard-content {
  display: grid;
  grid-template-columns: 300px 1fr 300px;
  gap: 16px;
}

.left-panel, .middle-panel, .right-panel {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.doctor-card, .activity-card, .cases-card, .report-card, .completed-card {
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  background-color: #fff;
}

.avatar-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 16px 0;
}

.doctor-avatar {
  margin-bottom: 16px;
  background-color: #1890ff;
}

.info h3 {
  margin: 0 0 8px 0;
  font-size: 18px;
  font-weight: 600;
  color: #262626;
}

.doctor-stats {
  margin-bottom: 16px;
}

.doctor-stat-item {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
  color: #595959;
  cursor: pointer;
  padding: 6px;
  border-radius: 4px;
  transition: background-color 0.3s;
}

.doctor-stat-item:hover {
  background-color: #f0f5ff;
}

.doctor-stat-item :deep(svg) {
  margin-right: 8px;
  color: #1890ff;
}

.schedule-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
}

.activity-item {
  display: flex;
  flex-direction: column;
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  transition: background-color 0.3s;
}

.activity-item:hover {
  background-color: #f0f5ff;
}

.activity-title {
  font-size: 14px;
  color: #262626;
}

.activity-time {
  font-size: 12px;
  color: #8c8c8c;
}

.card-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 600;
}

.cases-list, .report-list, .completed-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.case-item, .report-item, .completed-item {
  display: flex;
  align-items: center;
  padding: 12px;
  border-radius: 8px;
  background-color: #fafafa;
  transition: all 0.3s;
}

.case-item:hover, .report-item:hover, .completed-item:hover {
  background-color: #f0f5ff;
}

.case-icon, .report-item-icon, .completed-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  margin-right: 12px;
  font-size: 20px;
  background-color: rgba(24, 144, 255, 0.1);
  color: #1890ff;
}

.case-info, .report-item-info, .completed-info {
  flex: 1;
}

.case-title, .report-item-title, .completed-title {
  font-size: 14px;
  font-weight: 500;
  color: #262626;
  margin-bottom: 4px;
}

.case-meta, .report-item-date, .completed-date {
  font-size: 12px;
  color: #8c8c8c;
  display: flex;
  align-items: center;
  gap: 8px;
}

.case-action, .report-item-action {
  margin-left: 8px;
}

.view-more {
  text-align: center;
  margin-top: 16px;
}

.view-more a {
  color: #1890ff;
  font-size: 14px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
  transition: background-color 0.3s;
}

.view-more a:hover {
  background-color: #f0f5ff;
  text-decoration: underline;
}

.empty-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px 0;
  color: #bfbfbf;
}

.empty-icon {
  font-size: 48px;
  margin-bottom: 16px;
}

.empty-text {
  font-size: 14px;
}

@media (max-width: 1200px) {
  .dashboard-content {
    grid-template-columns: 1fr 1fr;
  }
  
  .left-panel {
    grid-column: span 2;
    grid-row: 1;
  }
  
  .doctor-card {
    max-width: 300px;
    margin: 0 auto;
  }
  
  .activity-card {
    display: none;
  }
}

@media (max-width: 768px) {
  .stat-cards {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .dashboard-content {
    grid-template-columns: 1fr;
  }
  
  .left-panel, .middle-panel, .right-panel {
    grid-column: span 1;
  }
  
  .left-panel {
    grid-row: auto;
  }
}
</style>